<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.bootcss.com/PreloadJS/1.0.1/preloadjs.min.js"></script>
    <script>

        var image = new Image()
        image.src="1.png"

        // 使用XMLHttpRequest对象
        var xhr = new XMLHttpRequest()
        xhr.onreadystatechange = callback
        xhr.onprogress = progressCallback
        xhr.open("GET", "abc.php", true)
        xhr.send()

        function callback(){
            if(xhr.readyState == 4 && xhr.status == 200){
                var responseText = xhr.responseText
            } else {
                console.log("Request was unsuccessful: " + xhr.status)
            }
        }
        function progressCallback(e){
            e = e || event
            if (e.lengthComputable){
                console.log("Received " + e.loaded + "of" + e.total + " bytes")
            }
        }

        // 使用preload.js库来实现
        var queue = new createjs.LoadQueue(false) // false 使用img标签
        queue.on("complete", handleComplete, this)

        queue.loadManifest([
            {id: 'img1', src:"http://cms-bucket.nosdn.127.net/catchpic/b/be/befea11e9ddcc546b802ddeb852e1e63.jpg?imageView&thumbnail=550x0"},
            {id: 'img2', src:"http://cms-bucket.nosdn.127.net/catchpic/d/de/debfc90dfd9aee18d9672c0391477925.jpg?imageView&thumbnail=550x0"}
        ])

        

        function handleComplete(){
            var image = queue.getResult("img1")
            document.body.appendChild(image)
        }
    </script>
</body>
</html>